<template>
  <div>
    <el-dialog :title="title"
               :visible.sync="visible"
               v-loading="loading"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="70%">
      <el-button type="primary"
                 @click="handleAdd()">新 增
      </el-button>


      <element-table class="mt-20"
                     :columns="columns"
                     :data="tableData"
                     v-loading="loading"
                     pager
                     :pageTotal="pageTotal"
                     :pageIndex="listQuey.pageIndex"
                     :pageSize="listQuey.pageSize"
                     @handleChangePage="handleChangePage">

        <template v-slot:option="{row}">
          <el-button type="primary"
                     @click="handleOption('update', row)">编辑
          </el-button>
          <el-button type="danger"
                     @click="handleOption('del', row)">删除
          </el-button>
        </template>
      </element-table>


    </el-dialog>
    <el-dialog :title="updatetitle"
               :visible.sync="updateShow"
               width="50%">
      <el-form :model="submitData"
               label-position="right"
               ref="formModelRef"
               :rules='formModelRules'
               label-width="150px">
        <el-form-item label="科普知识名称："
                      prop="name">
          <el-input v-model="submitData.name"
                    clearable
                    style="width: 380px"
                    placeholder="请输入科普知识名称"></el-input>
        </el-form-item>
        <el-form-item label="链接："
                      prop="url">
          <el-input v-model="submitData.url"
                    clearable
                    style="width: 380px"
                    placeholder="请输入链接"></el-input>
        </el-form-item>
        <el-form-item label="前端排序："
                      prop="sortNum">
          <el-input v-model="submitData.sortNum"
                    clearable
                    style="width: 380px"
                    placeholder="请输入前端排序"></el-input>
        </el-form-item>

      </el-form>
      <p align="center">
        <el-button @click="updateShow=false"
                   type="info">取 消
        </el-button>
        <el-button type="primary"
                   @click="submitForm()">保 存
        </el-button>
      </p>

    </el-dialog>

  </div>
</template>
<script>
import ElementTable from '@/base/ElementTable'

export default {
  name: 'kepuDialog', // 病种管理
  props: {
    dataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          label: '科普名称',
          prop: 'name',
          align: "center"
        }, {
          label: '链接',
          prop: 'url',
          align: "center"
        }, {
          label: '前端排序',
          prop: 'sortNum',
          align: "center"
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 450
        }
      ],
      title: '科 普',
      updatetitle: '新 增',
      updateShow: false,
      loading: false,
      id: '',
      list: [],
      pageTotal: 0,
      listQuey: {
        diseaseId: '',
        pageIndex: 1,
        pageSize: 20,
      },
      dataObj: {},
      submitData: {},
      formModelRules: {
        name: [
          {required: true, message: '请输入科普知识', trigger: 'blur'},
        ],
        url: [
          {required: true, message: '请输入链接', trigger: 'blur'},
        ],
        sortNum: [
          {required: true, message: '请输入排序', trigger: 'blur'},
        ]

      }
    }
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    //获取列表
    getList() {
      this.post(this.api.healthMap.getHealthMapKnowledgeList, {
        pageIndex: this.listQuey.pageIndex - 1,
        pageSize: this.listQuey.pageSize,
        diseaseId: this.dataObj.id
      }).then((res) => {
        if (res.data.code === '200') {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum
        }
      })

    },
    handleAdd() {
      this.updatetitle = '新 增'
      this.updateShow = true
      this.submitData = {}
    },
    async handleOption(op, row) {
      switch (op) {
        case 'update':
          this.updatetitle = '编 辑'
          this.updateShow = true
          this.submitData = row
          break
        case 'del':
          this.$confirm('确认删除？', '提示', {
            type: 'warning'
          }).then(() => {
            this.delHealthMapKnowledge(row.id)
          })
          break
      }
    },

    //更新科普
    updateHealthMapKnowledge() {
      this.post(this.api.healthMap.updateHealthMapKnowledge, this.submitData).then((res) => {
        if (res.data.code === '200') {
          this.$message.success('更新成功!');
          this.updateShow = false
          this.getList()
        }
      })
    },
    //删除科普
    delHealthMapKnowledge(id) {
      this.post(this.api.healthMap.delHealthMapKnowledge, {
        id: id
      }).then((res) => {
        if (res.data.code === '200') {
          this.$message.success('删除成功!');
          this.getList()
        }
      })
    },
    //新增
    submitForm() {
      this.submitData.diseaseId = this.dataObj.id
      this.$refs.formModelRef.validate(async (valid) => {
        if (valid) {
          this.updateHealthMapKnowledge()
        }
      })
    },
    // 分页
    handleChangePage(page) {
      this.listQuey.pageIndex = page;
      this.getList();
    },

  },
  created() {
    this.id = this.dataObj.id
    this.listQuey.diseaseId = this.dataObj.id
    this.getList()
  },
  components: {
    'element-table': ElementTable
  }


}
</script>
<style scoped lang="scss">
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.w-100 {
  width: 100px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
